<template>
	<view class="record-detail page-content">
		<nav-bar @clickRight="back">分类</nav-bar>
		<!-- <component :is="componentName"></component> -->
		<view class="page-main">
			<uni-grid :column="4" :square="false" :showBorder="false" :highlight="false" @change="recordClick">
				<uni-grid-item v-for="(item, index) in recordList" :index="index" :key="index">
					<view class="grid-item-box middleCenter">
						<category :type="item.key" style="margin-bottom: 4px;"/>
						<text class="text">{{ item.name }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		
	</view>
	
</template>


<script setup>
	import {recordList} from '@/utils/config.js'
	import {ref,onMounted} from 'vue'
	import { onLoad,onShow } from '@dcloudio/uni-app';
	const recordClick = (data)=>{
		console.log('点击',data)
		let {index} = data.detail
		let item = recordList[index]
		if(item.dev){
			uni.navigateTo({
				url: `/pages/tabbar/tabbar-3/recordDetail/recordDetail?type=${item.key}`
			});
		}else{
			uni.showToast({
				title: '开发中',
				duration: 1000
			});
		}
	}
	let imgPath =ref('');
	onShow(()=>{
		console.log(uni.getStorageSync('FormulaMilk'),'FormulaMilk');
		imgPath.value=uni.getStorageSync('cachedImagePath')
		console.log(imgPath,'imgPath,图片路径');
	})
	
</script>

<style  lang="scss">
// .tab-page {
// 	position: relative;
// 	display: flex;
// 	flex-direction: column;
// 	.scroll-bar {
// 		flex: 1;
// 		height: 100%;
// 	}
// }
.grid-item-box{
	flex-direction: column;
	padding: 20rpx 0;
}
</style>